<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>11-组件插槽基本用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <tip-box>我是内容A</tip-box>
      <tip-box>我是内容B</tip-box>
      <!-- 2：如果组件中没有数据，就会默认填充插槽中的数据 -->
      <tip-box></tip-box>
    </div>
    <script>
      Vue.component('tipBox', {
        data: function () {
          return {
            info: 'hello',
          };
        },
        // 1：提供插槽数据
        template: `
          <div>
            <slot>内容来自 -- 插槽</slot>
          </div>
        `,
      });
      var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
      });
    </script>
  </body>
</html>
